<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-v2.6.14.js"></script>
</head>
<body>
<div id="app1">

    <model1></model1>
    <model1></model1>
    <model1></model1>
    <model1></model1>

</div>
<div id="app2">

    <model1></model1>
    <model1></model1>
    <model1></model1>
    <model1></model1>

</div>
</body>
<script type="text/javascript">
    // Vue.component("model1",{
    //     template: "<div><input type='text' v-model='value'><button @click='clickMe'>点我</button></div>",
    //     data:function (){
    //         return{
    //             value:0
    //         }
    //     },
    //     methods:{
    //         clickMe(){
    //             this.value=this.value+1;
    //         }
    //     }
    // });
    new Vue({
        el:"#app1",
        components:{
             "model1":{
                 template: "<div><input type='text' v-model='value'><button @click='clickMe'>点我</button></div>",
                     data:function (){
                         return{
                             value:0
                         }
                     },
                     methods:{
                         clickMe(){
                             this.value=this.value+1;
                         }
                     }
             }
        }
    })
    new Vue({
        el:"#app2"
    });


</script>
</html>